// 参考bootstrap4设计响应式布局界面
@mixin extra-small-screen {
  @media screen and (max-width: 575.9px) {
    @content;
  }
}
@mixin small-screen {
  @media screen and (max-width: 767.9px) and (min-width: 576px) {
    @content;
  }
}

@mixin medium-screen {
  @media screen and (max-width: 991.9px) and (min-width: 768px) {
    @content;
  }
}

@mixin large-screen {
  @media screen and (max-width: 1199.9px) and (min-width: 992px) {
    @content;
  }
}

@mixin extra-large-screen {
  @media screen and (min-width: 1200px) {
    @content;
  }
}
// 自定设备界限

@mixin phone-screen {
  @include extra-small-screen {
    @content;
  }
}

@mixin pad-screen {
  @include small-screen {
    @content;
  }
}

@mixin pc-screen {
  @include medium-screen {
    @content;
  }
  @include large-screen {
    @content;
  }
  @include extra-large-screen {
    @content;
  }
}
